<template>
    <!-- 有声书分类 -->
    <Class :list='classList'></Class>
    <div class="list">
        <div class="item" v-for="item in recommendList" :key="item.moduleInfo.id">
            <h3>{{ item.moduleInfo.displayName }}</h3>
            <!-- 横向布局 -->
            <div class="details" v-for=" details in item.albumBriefDetailInfos.slice(0, 3)" :key="details.id"
                @click="navTo(details)">
                <img class="img" :src="details.albumInfo.cover" alt="">
                <div class="title">{{ details.albumInfo.title }}</div>
            </div>
            <!-- 竖向布局 -->
            <div class="detail" v-for=" detail in item.albumBriefDetailInfos.slice(3)" :key="detail.id"
                @click="navTo(detail)">
                <div class="img"><van-image width="100" radius="6" height="100" :src="detail.albumInfo.cover"
                        fit="cover"></van-image>
                </div>
                <div class="content">
                    <div class="title">{{ detail.albumInfo.title }}</div>
                    <div class="desc">{{ detail.albumInfo.shortIntro }}</div>
                    <div class="info">
                        <span class="left"> <van-icon name="music-o" /> {{ detail.statCountInfo.trackCount }}</span>
                        <span class="right"><van-icon name="service-o" />{{ detail.statCountInfo.playCount > 100000000 ?
                            (detail.statCountInfo.playCount / 100000000).toFixed(2) + '亿' : (detail.statCountInfo.playCount
                                / 100000000).toFixed(2) + '万' }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { getcategory } from '../../api/audiobook'
import Class from '../../components/class/index.vue'
import { ref } from 'vue';
import router from '@/router';

//跳转去详情页
const navTo = (item) => {
    console.log(item);
    router.push(`/coursedetail?id=${item.albumInfo.id}&anchorId=${item.anchorInfo
        .id}&title=${item.albumInfo.title}`)
}


const recommendList = ref<any[]>([])


//分类导航
const classList = ref<any[]>([])
//初始化有声书数据
const reqcategory = async () => {
    try {
        let result = await getcategory()
        // console.log(result);
        classList.value = result.data.moduleContent.tomatoes
        recommendList.value = result.data.moduleContent.moduleRankDatas
    } catch (error) {
        console.error(error);

    }
}

onMounted(() => {
    reqcategory()
})
</script>

<style lang="less" scoped>
.list {


    .item {



        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        h3 {
            margin-left: 10px;
            width: 100%;
            color: #40404c;
        }

        .details {
            margin-bottom: 20px;
            width: 30%;
            display: flex;
            flex-direction: column;

            .img {
                width: 100px;
                height: 100px;
            }



            .title {
                font-size: 28rpx;
                overflow: hidden;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }
        }

        .detail {
            display: flex;
            width: 100%;
            margin-bottom: 20px;

            .img {
                width: 30%;
            }

            .content {
                // padding: 10px;
                width: 60%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .title {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-wrap: normal;
                    font-size: 16px;
                }

                .desc {
                    width: 100%;

                    color: #999999;
                    font-size: 12px;
                    overflow: hidden;
                    -webkit-line-clamp: 2;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                }

                .info {
                    margin-bottom: 10px;
                    color: #999999;
                    font-size: 12px;

                    .left {
                        margin-right: 20px;
                    }

                }
            }
        }

    }
}
</style>